<<<<<<< HEAD
=======
<template>
  <div class="home">
    <!-- 推荐 -->
    <!-- 头部 -->
    <header></header>
    <div class="container">
      <!-- 上 摄影 -->
      <div class="top">
        <van-image
          width="335rem"
          height="200rem"
          :src="recommendListData.data[0]?.img_url"
        />
        <div class="center">
          <span>{{ recommendListData.data[0]?.title }}</span
          >|
          <span>{{ recommendListData.data[0]?.pic_info }}</span>
        </div>
        <p>{{ recommendListData.data[0]?.forward }}</p>
        <div class="foot">
          <span>{{ recommendListData.data[0]?.words_info }}</span>
          <van-icon name="info" color="#ccc" size="13rem" />
        </div>
      </div>
      <!-- 小图标 -->
      <div class="icon" style="height: 20rem; background-color: #fff">
        <div class="xiaoji">
          <i class="iconfont icon-zhinanzhen"></i>
          <span>小记</span>
        </div>
        <div class="right">
          <ul>
            <li><i class="iconfont icon-qianbi"></i></li>
            <li><i class="iconfont icon-shuqian1"></i></li>
            <li>
              <i class="iconfont icon-aixinshoucangmiaobian"></i>
              <span>{{ recommendListData.data[0]?.like_count }}</span>
            </li>
            <li><i class="iconfont icon-fenxiang"></i></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 第二个 阅读 -->
    <div class="read">
      <div class="read-text">
        <span>-阅读-</span>
      </div>
      <div class="text">
        <h4>{{ recommendListData.data[1]?.title }}</h4>
        <div class="span-txt">
          <span>文</span>/
          <span>{{ recommendListData.data[1]?.author.user_name }}</span>
        </div>
        <p>{{ recommendListData.data[1]?.forward }}</p>
      </div>
      <van-image
        width="325rem"
        height="200rem"
        style="margin-top: 10rem"
        :src="recommendListData.data[1]?.img_url"
        radius="5rem"
      />
      <div class="foot"></div>
    </div>
    <!-- 第三个问答 -->
    <div class="question" style="font-size: 16rem">
      <div class="question-text">
        <span>-{{ recommendListData.data[2]?.tag_list[0].title }}-</span>
      </div>
      <div class="text">
        <h4>{{ recommendListData.data[2]?.title }}</h4>
        <span>{{ recommendListData.data[2]?.answerer.user_name }}</span>
        <p>{{ recommendListData.data[2]?.forward }}</p>
      </div>
      <van-image
        width="325rem"
        height="200rem"
        style="margin-top: 10rem"
        :src="recommendListData.data[2]?.img_url"
        radius="5rem"
      />
      <div class="icon"></div>
    </div>
    <!-- 第四个 收音机 -->
    <div class="radio" style="font-size: 16rem">
      <div class="radio-text">
       
        <span>-{{ recommendListData.data[3]?.share_list.qq.title }}-</span>
      </div>
      <div class="text">
        <h4>ONE</h4>
        <i class="iiconfont icon-shouyinji_broadcast-radio"></i>
        <p>{{ recommendListData.data[3]?.volume }}</p>
      </div>
      <van-image
        width="325rem"
        height="200rem"
        style="margin-top: 10rem"
        :src="recommendListData.data[3]?.img_url"
        radius="5rem"
      />
      <div class="play">
        <p>{{ recommendListData.data[3]?.title }}</p>
        <i class="iconfont"></i>
      </div>
      <div class="icon">
        <div class="left">
          <van-image
          
        width="20rem"
        height="20rem"
        :src="recommendListData.data[3]?.author.web_url"
        radius="50%"
      />
      <span>{{ recommendListData.data[3]?.author.user_name }}</span>
        </div>
        <div class="right"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="home">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { getRecommendListData } from "@/api/home";

onMounted(() => {
  getRecommendListDataFn(); // 获取推荐列表
  //时间日期
});

// 获取当前日期

let searchForm = ref({
  startTime: "",
});

const getDateTime = () => {
  const date = new Date();
  const theYear = date.getFullYear(); // 获取完整的年份(4位)
  const theMonth = date.getMonth() + 1; // 获取当前月份(1-12,1代表1月)
  const theDay = date.getDate(); // 获取当前日(1-31)

  // 确保月份和日期是两位数
  const formattedMonth = theMonth >= 10 ? theMonth : "0" + theMonth;
  const formattedDay = theDay >= 10 ? theDay : "0" + theDay;

  // 设置 startTime 为当前日期
  searchForm = { startTime: `${theYear}-${formattedMonth}-${formattedDay}` };
};

getDateTime();
console.log("searchForm.startTime");

let recommendListData = reactive({
  data: [],
});
// 获取每日推荐列表
let getRecommendListDataFn = async () => {
  recommendListData.data = (
    await getRecommendListData(searchForm?.startTime)
  ).data.content_list;
};

</script>

<style scoped >
.home {
  width: 375rem;
  background-color: #f6f6f6;
  .container {
    margin: 0;
    margin-top: 10rem;
    width: 375rem;
    height: 100%;
    padding-left: 20rem;
    padding-right: 20rem;
    background-color: #fff;
    padding-bottom: 10rem;
    .top {
      background-color: #fff;
      margin-top: 10rem;
      width: 335rem;
      /* padding: 0 15rem; */
      height: 400rem;
      position: relative;
      border-radius: 10rem !important;
      box-shadow: 0 2rem 2rem 0 rgba(0, 0, 0, 0.2), 0 3rem 4rem 0 rgba(0, 0, 0, 0.19);
      overflow: hidden;
      .center {
        width: 345rem;
        height: 15rem;
        background-color: #fff;
        font-size: 12rem;
        text-align: center;
        color: #ccc;
      }
      p {
        font-size: 16rem;
        margin-top: 30rem;
        padding: 0 15rem;
      }
      .foot {
        position: absolute;
        bottom: 25rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 13rem;
        span {
          padding-right: 2rem;
          color: #ccc;
        }
      }
    }
    .icon {
      margin-top: 20rem;
      width: 100%;
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      .xiaoji {
        font-size: 15rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        i {
          display: block;
          padding-right: 10rem;
        }
        span {
          color: #ccc;
        }
      }
      .right {
        ul {
          display: flex;
          width: 200rem;
          justify-content: space-between;
          li {
            font-size: 18rem;
            color: #ccc;
            span {
              padding-left: 5rem;
            }
          }
        }
      }
    }
  }
  .read {
    margin-top: 20rem;
    width: 375rem;
    padding: 0 20rem;
    background-color: #fff;
    padding-bottom: 10rem;
    .read-text {
      text-align: center;
      span {
        color: #ccc;
        font-size: 12rem;
      }
    }
    .text {
      h4 {
        font-size: 14rem;
      }
      .span-txt {
        margin-top: 10rem;
        color: #ccc;
        font-size: 12rem;
      }

      p {
        margin-top: 20rem;
        font-size: 13rem;
        color: #8b8b81;
      }
    }
  }
  .question {
    margin-top: 20rem;
    width: 375rem;
    padding: 0 20rem;
    background-color: #fff;
    padding-bottom: 10rem;
    .question-text {
      padding-top: 3rem;
      text-align: center;
      span {
        color: #ccc;
        font-size: 12rem;
      }
    }
    .text {
      h4 {
        font-size: 14rem;
      }
      span {
        margin-top: 5rem;
        font-size: 14rem;
        color: #ccc;
      }
      p {
        margin-top: 20rem;
        font-size: 13rem;
        color: #8b8b81;
      }
    }
  }
  .radio {
    margin-top: 20rem;
    width: 375rem;
    padding: 0 20rem;
    background-color: #fff;
    padding-bottom: 10rem;
    position: relative;
    .radio-text {
      padding-top: 3rem;
      text-align: center;
      span {
        color: #ccc;
        font-size: 12rem;
      }
    }
    .text {
      display: flex;
      align-items: center;
      color: #fff;
     
      justify-content: space-evenly;
      width: 150rem;
      font-size: 16rem;
      position: absolute;
      top: 40rem;
      left: 25rem;
      z-index: 2000;
      h4 {
        font-weight: normal;
      }
      i{
        font-size: 14rem;
      }
      p {
        color: #dce8d3;
      }
    }
    .play {
      position: absolute;
      bottom: 55rem;
      left: 25rem;
      font-size: 18rem;
      color: #dce8d3;
    }
    .icon{
      .left{
        display: flex;
        align-items: center;
        span{
          padding-left: 5rem;
        }
      }
    }
  }
}
</style>
>>>>>>> 3a4bc8b00656302783761c1b3035a577d1ef7216
